<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>品牌添加</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/plugins/elementui/index.css">
    <link rel="stylesheet" href="/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <script src="/plugins/healthmobile.js"></script>
</head>
<body>
<div style="width:50%;margin-top: 100px">
    <div id="app">
        <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="50%" :align='center' >
            <el-form-item
                    prop="brandName"
                    label="品牌名称"
                    :rules="[
      { required: true, message: '请输入品牌名称', trigger: 'blur' }
    ]"

            >
                <el-input v-model="dynamicValidateForm.brandName" placeholder="请输入品牌名"></el-input>
            </el-form-item>
            <el-form-item
                    label="品牌首字母"
                    prop="letter"
                    :rules="[
                    {required: true, message: '首字母不能为空', trigger: 'blur'}
                    ]"
            >
                <el-input v-model="dynamicValidateForm.letter" placeholder="只能输入一个字母"></el-input>
            </el-form-item>
            <el-form-item label="品牌LOGO：">
                <el-upload
                        class="upload-demo"
                        action="/wbrand/upload"
                        :on-success="handleSuccess"
                        name="file" >

                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过50kb</div>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>


</body>
<!-- 引入组件库 -->
<script src="/js/vue.js"></script>
<script src="/plugins/elementui/index.js"></script>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script src="/js/axios.js"></script>
<script>
    var vue = new Vue ({
        el: '#app',
        data: {
            dynamicValidateForm: {
                brandName: '',
                letter: '',
                imageUrl:""
            },

        },
        methods: {
            handleSuccess(response, file){
                console.log(response.data);
                console.log(file);
                console.log("成功上传");
                this.$message({
                    message: response.message,
                    type: response.flag ? 'success':'error'
                });
                vue.imageUrl = response.data;
            },
            //上传
            upload() {
                const param = new FormData();
                param.append('file', this.file);
                const config = {
                    headers: { 'Content-Type': 'multipart/form-data' }
                };//设置请求头
                axios.post("/wbrand/upload", param, config).then(response => {
                    if (response.data.flag){
                        alert("上传成功");
                    }
                });
                console.log("upload方法执行了");
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {

                    if (valid) {
                        alert('submit!');
                        //校验表格通过，利用fastdfs返回图片地址；
                            //获取图片的url
                            console.log("imageUrl"+vue.imageUrl);
                            var imgUrl = vue.imageUrl;
                            var brand = {
                                name: vue.dynamicValidateForm.brandName,
                                letter: vue.dynamicValidateForm.letter,
                                image: imgUrl,
                            };
                            //发送请求,存储品牌名和品牌首字母
                            axios.post("/wbrand/add",brand)
                                .then((resp)=>{
                                    if(resp.data.flag){
                                        //如果添加成功,跳转到品牌页面
                                        location.href = "/wbrand/tobrand";
                                    }
                                });


                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },

        }
    });

</script>
</html>